/*
 * @Author: xiaosihan 
 * @Date: 2024-09-22 14:19:10 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-09-22 14:51:28
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./allProject.module.less";
import allProjectStore from "./allProjectStore";
import clsx from "clsx";
import hashHistory from "@hashHistory";

interface Iprops {
    children?: ReactNode
}

// 所有项目
export default function AllProject(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [list, setList] = useState(allProjectStore.list);
    const [activeProjectId, setActiveProjectId] = useState(allProjectStore.activeProjectId);

    useEffect(() => {
        allProjectStore.getList();
    }, []);

    useEffect(() => autorun(() => {
        setList(allProjectStore.list);
        setActiveProjectId(allProjectStore.activeProjectId);
    }), []);

    return (
        <div
            ref={dom}
            className={styles.allProject}
        >
            {
                list.map(item => {
                    return (
                        <div
                            key={item.id}
                            className={clsx(styles.item, activeProjectId === item.id && styles.active)}
                            onClick={() => {
                                hashHistory.push(`/projectDatail/${item.id}`);
                            }}
                        >{item.name}</div>
                    )
                })
            }
        </div>
    );

}